<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // load事件: 资源加载
        1. 当将js代码写到head标签标签中(将js代码写到html标签前面), 就要使用load事件
        2. 给window注册load事件
        3. 只要网页中的所有标签都加载完成后(渲染完成后)才会执行load事件
        4. 如果将js代码写到html标签后面, 则load事件可以加也可以不用加
        例:
        window.onload = function () {
            let div = document.querySelector('div');
            console.log(div);
        }



        // 滚动事件: 拖拽滚动条的时候,触发滚动事件 scroll事件
        // 步骤
        // ☞ 必须要保证页面有滚动条(垂直方向)
        // ☞ 给window注册滚动事件
        window.addEventListener('scroll', function () {
            console.log(123);
        })
        // 在滚动事件中获取页面滚动的距离 .scrollTop
        // 语法: document.documentElement.scrollTop
        window.addEventListener('scroll', function () {
            let res = document.documentElement.scrollTop;
        });




        // 获取元素的大小
        // 标签对象.offsetWidth   获取元素实际宽度 = 内容区域 + 左右内边距 + 左右边框
        // 标签对象.offsetHeight  获取元素实际高度 = 内容区域 + 内边距 + 边框

        // 标签对象.clientWidth   获取元素宽度 = 内容区域 + 左右内边距
        // 标签对象.clientHeight  获取元素高度 = 内容区域 + 内边距

        // 标签对象.clientLeft    获取元素的左边框
        // 标签对象.clientTop     获取元素的上边框

        // 右边边框 = 标签对象.offsetWidth - 标签对象.clientWidth - 标签对象.clientLeft;





        // 鼠标按下事件     mousedown
        let div = document.querySelector('div');
        div.onmousedown = function () {
            console.log(123);
        }
        // 鼠标抬起事件     onmouseup
        div.onmouseup = function () {
            console.log(456);
        }

        // 鼠标进入事件     mouseover
        div.onmouseover = function () {
            console.log(123);
        }

        // 鼠标离开事件     mouseout
        div.onmouseout = function () {
            console.log(456);
        }


        // 获取元素位置:
        //标签对象.offsetLeft 获取元素的位置默认是参照页面左上角   
        //标签对象.offsetLeft 如果父元素有定位,就参照父元素
        let div = document.querySelector('.one');
        console.log(div.offsetLeft);


        // 延迟函数:
        // 只能调用一次
        // 第二个参数是多少毫秒后执行一次
        // 语法: setTimeout(函数名, 延迟时间(毫秒单位))
        function fn() {
            console.log(123);
        }
        setTimeout(fn, 2000);




        // 递归函数: 在函数内部函数自己调用自己
        // 递归函数: 就是一个死循环
        // 如果需要停止递归函数,则设置return关键字
        let i = 1;
        function fn() {
            i++;
            console.log(123);
            if (i >= 5) {
                return;
            }
            fn();
        }
        fn();
        // ☞ clearTimeout(id)可以用来停止延迟函数
        //延迟函数和定时器的另外一种写法:
        // setTimeout(函数名, 毫秒时间);
        // setInterval(函数名, 毫秒时间);
        // 或者
        // setTimeout(function(){逻辑代码}, 时间);
        // setInterval(function(){逻辑代码}, 时间);
    </script>
</body>

</html>